<template>
    <div id="login">
        <!-- 头部 -->
        <div class="loginHeader">
            <div>
                &nbsp;<i class="el-icon-arrow-left" @click="$router.push('/mine')"></i>
            </div>
            <div class="jdlogin">京东登录</div>
        </div>
        <!-- 主体 -->
        <div class="loginMain">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="lm">
                <el-tab-pane label="账号密码登录" name="first">
                    <el-form  status-icon  ref="ruleForm" :rules="rules" :model="ruleForm" label-width="15%">
                        <el-form-item label="账号" prop="username" >
                            <el-input v-model="ruleForm.username" placeholder="用户名/邮箱/已验证手机">
                            </el-input>    
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
                        </el-form-item> 
                         <el-form-item>
                            <el-button @click="login" class="lg" :class="{log1:ruleForm.username!=''&&ruleForm.password!=''}" >登 录</el-button>
                        </el-form-item>          
                    </el-form>  
                </el-tab-pane>
                <el-tab-pane label="手机号快捷登录" name="second">
                    <el-form status-icon ref="ruleForm1" :rules="rules" :model="ruleForm1" label-width="15%" class="el-formss">
                        <el-form-item  prop="phone" >
                            <el-input  prefix-icon="el-icon-mobile-phone" v-model="ruleForm1.phone" placeholder="请输入手机号" class="phoneInput">
                            </el-input>
                            <el-button type="info">获取验证码</el-button>    
                        </el-form-item>
                        <el-form-item  prop="phoneVal" >
                            <el-input v-model="ruleForm1.phoneVal" placeholder="请输入收到的验证码" class="phoneVal"  suffix-icon="el-icon-error" clearable>
                            </el-input>   
                        </el-form-item>
                         <el-form-item>
                            <el-button @click="login1" class="lg lg2" :class="{log1:ruleForm1.phone!=''&&ruleForm1.phoneVal!=''}">登 录</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <el-form>  
                <el-form-item>
                    <div class="lg1">一 键 登 录</div>
                </el-form-item> 
            </el-form>
            <div class="forgetpsw">
                <div>
                    <i class="fa fa-lock"></i>
                    <span>忘记密码</span>
                </div>
                <div>
                    <i class="fa fa-tablet"></i>
                    <span>手机快速注册</span>
                </div>
            </div>
            <div class="otherMethod">
                <div class="loginLine"></div>
                <div>其他登录方式</div>
                <div class="loginLine"></div>
            </div>
            <div class="qqwechat">
                <i class="fa fa-qq" style="font-size:1.2rem;color:#39A7F5"></i>
                <i class="fa fa-wechat" style="font-size:1.2rem;color:#00ad19"></i>
            </div>
            <div class="loginpl">
                <p>登录即代表您已同意<a href="">京东隐私政策</a></p>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import store from "@/store/index.js";
export default {
  store,
  data() {
    return {
      activeName: "second",
      ruleForm: {
        username: "",
        password: "",
      },
      ruleForm1:{
        phone: "",
        phoneVal:"",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: blur },
          { min: 6, max: 18, message: "长度在6到18之间", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: blur },
          { min: 6, max: 18, message: "长度在6到18之间", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: blur },
          {
            pattern: /^1[3,5,7,8][1,2,3,5,6,8,7,9]\d{8}$/,
            message: "请填写正确的手机号",
            trigger: blur
          },
        ],
        phoneVal:[
            {required:true,message:'请输入验证码',trigger:blur},
            {pattern:/^\d{6}$/,message:'验证码不正确',trigger:blur}
        ],
      }
    };
  },
  //路由守卫
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当登录成功，为true的时候，直接跳转到首页
      if (vm.logged) {
        vm.$router.push("/mine");
      }
    });
  },
  methods: {
    handleClick(tab, event) {
    },
    //状态管理，映射setLogged,setUserInfo这两个方法
    ...mapMutations(["setLogged", "setUserInfo"]),
    //点击登录后的数据设置
    login() {
      this.$refs.ruleForm.validate(pass => {
        if (pass == true) {
          //确定登录
          this.setLogged(true);
          //将用户信息从数据中调用
          this.setUserInfo(this.ruleForm);
          //登陆后跳转到首页
          this.$router.push({name:'mine',params:{val:this.ruleForm.username}});
        }
      });
    },
    login1() {
      this.$refs.ruleForm1.validate(pass => {
        if (pass == true) {
          //确定登录
          this.setLogged(true);
          //将用户信息从数据中调用
          this.setUserInfo(this.ruleForm);
          //登陆后跳转到首页
          this.$router.push({name:'mine',params:{pho:this.ruleForm1.phone}});
        }
      });
    },
  },
  computed: {
    //映射logged，userInfo两个状态
    ...mapState(["logged", "userInfo"])
  }
};
</script>
<style>
/*头部样式*/
.loginHeader {
  width: 100%;
  height: 2.75rem;
  background-color: #f4f4f4;
  display: flex;
  line-height: 2.75rem;
  border-bottom: 0.08rem solid #bbb;
  color: #666;
}
.loginHeader i {
  font-size: 1.5rem;
}
.jdlogin {
  width: 8rem;
  text-align: center;
  margin: 0 auto;
  font-size: 1.2rem;
}
/*主体样式*/
.el-tabs__nav {
  margin-left: 3.5rem;
}
.el-tabs__active-bar {
  background-color: red;
}
#login .lg{
  margin-left:-1.3rem;
}
#tab-first {
  color: #333;
}
#tab-second {
  color: #333;
}
.el-tabs__item:hover {
  color: #333;
}
.el-form {
 margin-right:1.5rem ;
}
.el-form-item__label {
  margin-left: 2rem;
}
.el-form-item__content {
  margin-left: 0.5rem;
}
.el-input {
  border: none;
  outline: medium;
}
.phoneInput {
  width: 10rem;
  margin-left: -1.7rem;
}
.phoneVal {
  width: 17.2rem;
 margin-left: -1.7rem;
}
.el-button{
    background-color: #ddd;
    border-color: #ddd;
    color:#333;
}
.lg {
  width: 17.2rem;
  height: 2.75rem;
  text-align: center;
  background-color: #f4f4f4;
  margin-left: 1rem;
  margin-top: 1rem;
  color: #999;
}
.lg1 {
  width: 17.2rem;
  height: 2.75rem;
  line-height: 2.75rem;
  text-align: center;
  margin-left: 1rem;
  border: 0.06rem solid red;
  color: red;
}
.lg2{
    margin-left: -1.6rem;
}
.log1{
    background-color: red;
    color:white;
}
.forgetpsw {
  width: 17.2rem;
  height: 2.75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 0.8rem;
  margin-bottom: 2rem;
}
.forgetpsw i {
  color: #999;
  font-size: 1.2rem;
}
.otherMethod {
  width: 17.2rem;
  height: 2.75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: #999;
  font-weight: 900;
  font-size: 0.87rem;
}
.loginLine {
  width: 5.5rem;
  border-top: 0.01rem solid #999;
  margin-top: 0.5rem;
}
.qqwechat {
  width: 10rem;
  height: 2.75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.loginpl {
  width: 17.2rem;
  height: 2.75rem;
  line-height: 2.75rem;
  margin: 0 auto 2rem auto;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
}
.loginpl a {
  color: #333;
  text-decoration: underline;
}
</style>


